 <template>
  <div style="padding: 10px">
    <div style="margin: 10px 0">
      <div><h3 style="text-align: center">团队成员管理</h3></div>
    </div>

<!--    搜索区-->
    <div style="margin: 10px 0">
      <!--姓名搜索-->
      <el-input v-model="search" placeholder="输入成员昵称" clearable style="width: 15%" />
      <el-button type="primary" style="margin-left: 5px" @click="search_name">查询</el-button>
      <!--分组搜索-->
      <el-select v-model="select" filterable placeholder="组别分类" :remote-method="search_group" style="width: 20%;padding-left: 40px">
        <el-option label="开发组" value="开发组" />
        <el-option label="提高组" value="提高组" />
        <el-option label="学习组" value="学习组" />
        <el-option label="所有组" value="" />
      </el-select>
      <!--搜索返回按钮-->
      <el-button v-if="fanHuiShow" type="primary" @click="fanHui" style="margin-left: 40px;" round> 返 回 </el-button>
      <!--    功能区-->
      <el-button type="primary" style="margin-right: 10px;float: right" @click="add">添加成员</el-button>
    </div>
<!--    表格-->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="学号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="group" label="组别" />
      <el-table-column prop="group_detail" label="方向" />
      <el-table-column prop="ask_for_leave_all" label="总请假次数" />
      <el-table-column fixed="right" label="操作" >
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
<!--    分页-->
    <div style="margin: 10px 0 ">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </div>
<!--    新增弹窗-->
    <div>
      <el-dialog v-model="show_add" title="新增用户数据" width="30%">
        <el-form ref="form_add" :model="form" label-width="120px" :rules="rule_add">
          <el-form-item label="学号" prop="id">
            <el-input v-model="form.id" style="width: 80%" />
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" style="width: 80%" />
          </el-form-item>
          <el-form-item label="组别" prop="group">
            <el-radio v-model="form.group" label="开发组">开发组</el-radio>
            <el-radio v-model="form.group" label="提高组">提高组</el-radio>
            <el-radio v-model="form.group" label="学习组">学习组</el-radio>
          </el-form-item>
          <el-form-item label="方向" prop="group_detail">
            <el-input v-model="form.group_detail" style="width: 80%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="show_add = false">取 消</el-button>
            <el-button type="primary" @click="save_add">确 定</el-button>
          </span>
        </template>

      </el-dialog>
    </div>
    <!-- 修改弹窗-->
    <div>
      <el-dialog v-model="show_update" title="修改用户数据" width="30%">
        <el-form ref="form_update" :model="form" label-width="120px" :rules="rule_update">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" style="width: 80%" />
          </el-form-item>
          <el-form-item label="组别" :rules="group">
            <el-radio v-model="form.group" label="开发组">开发组</el-radio>
            <el-radio v-model="form.group" label="提高组">提高组</el-radio>
            <el-radio v-model="form.group" label="学习组">学习组</el-radio>
          </el-form-item>
          <el-form-item label="方向" prop="group_detail">
            <el-input v-model="form.group_detail" style="width: 80%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="show_update = false">取 消</el-button>
            <el-button type="primary" @click="save_update">确 定</el-button>
          </span>
        </template>

      </el-dialog>
    </div>

  </div>
</template>

<script>


import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

export default {
  name: 'Member',
  components: {

  },
  data() {
    return{
      rule_update: {
        name: [
          {required: true, message: '姓名不能为空', trigger: 'blur',},
          { pattern: /^.{2,10}$/, message: '姓名必须为2-10个字符', trigger: 'blur' },
        ],
        group_detail: [
          {required: true, message: '方向不能为空', trigger: 'blur',},
        ],
        ask_for_leave_all: [
          {required: true, message: '总请假次数不能为空', trigger: 'blur'},
          { pattern: /^[0-7]$/, message: '请假次数0-7', trigger: 'blur' }
        ]
      },
      rule_add: {
        id: [
          { required: true, message: '学号不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{8}$/, message: '学号必须为8位数字', trigger: 'blur' }
        ],
        name: [
          {required: true, message: '姓名不能为空', trigger: 'blur',},
          { pattern: /^.{2,10}$/, message: '姓名必须为2-10个字符', trigger: 'blur' },
        ],
        group: [
          {required: true, message: '组别不能为空', trigger: 'change',},
        ],
        group_detail: [
          {required: true, message: '方向不能为空', trigger: 'blur',},
        ],
        ask_for_leave_all: [
          {required: true, message: '总请假次数不能为空', trigger: 'blur'},
          { pattern: /^[0-7]$/, message: '请假次数0-7', trigger: 'blur' }
        ]
      },
      form:{},
      show_add: false,
      show_update:false,
      search:"",
      select:"",
      currentPage: 1,
      pageSize:10,
      total: 0,
      tableData:[],
      fanHuiShow: false,
    }
  },
  created() { //页面加载 调用
    this.pgload()
  },
  methods: {
    // 搜索后返回总数居
    fanHui() {
      // 刷新页面
      window.location.reload();
    },
    // 组别搜索 1
    search_group() {
      if (!this.fanHuiShow) {
        this.fanHuiShow = true;
      }
      request.get("/member/search",{
        params:{
          url:"/member",
          group:this.select
        }
      }).then(res => {
        if (res.code == "200") {
          this.total = res.data.length
          this.tableData = res.data
          ElMessage({
            message: '搜索成功.',
            type: 'success',
          })
        } else if (res.code == "400"){
          ElMessage.error('暂无数据')
        }
        else if (res.code == "load"){
          this.load()
        }
        else {
          ElMessage.error('搜索失败：'+res.msg)
        }

      })
    },
    //姓名搜索 1
    search_name() {
      if (!this.fanHuiShow) {
        this.fanHuiShow = true;
      }
      request.get("/member/search",{
        params:{
          url:"/member",
          name:this.search
        }
      }).then(res => {
        if (res.code == "200") {
          this.total = res.data.length
          this.tableData = res.data
          ElMessage({
            message: '搜索成功.',
            type: 'success',
          })
        } else if (res.code == "400"){
          ElMessage.error('暂无数据')
        }
        else {
          ElMessage.error('搜索失败：'+res.msg)
        }
      })
    },
    // 数据加载 1
    pgload() {
      request.get("/member/get_member",{
        params:{
          url:"/member",
          limit:this.pageSize, // 初始展示数据 以展示数据大小为准
          offset:this.currentPage,
          order:"id"
        }
      }).then(res => {
        this.tableData = res.data
      })
      request.get("/member/get_member_num",{
        params:{
          url:"/member",
        }
      }).then(res => {
        this.total = res.data
      })
    },
    //打开 新增数据 弹窗 1
    add() {
      this.form={};
      this.show_add = true
    },
    // 添加 或 更改成员信息 1
    save_add() {
      this.$refs['form_add'].validate((valid) => {
        if (valid) {
          request.post("/member/add", this.form).then(res => {
            if (res.code === '200') {
              ElMessage({
                message: '新增成功.',
                type: 'success',
              })
            } else {
              ElMessage.error('新增失败：'+res.msg)
            }
            console.log(res)
            this.pgload()
            this.show_add = false
          })
        }
      })
    },
    save_update() {
      this.$refs['form_update'].validate((valid) => {
        if (valid) {
          request.patch("/member/update", this.form).then(res => {
            if (res.code == 200) {
              ElMessage({
                message: '更新成功.',
                type: 'success',
              })
            } else {
              ElMessage.error('更新失败.')
            }
            this.pgload()
            this.show_update = false
          })
        }
      })
    },
    //编辑表格信息 1
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.show_update = true
    },
    // 删除表格数据 1
    handleDelete(id) {
      request.delete("/member/delete/"+id).then(res => {
        if (res.code == "200") {
          ElMessage({
            message: '删除成功.',
            type: 'success',
          })
        } else {
          ElMessage.error('删除失败.')
        }
        this.pgload()
      })
    },
    //设置每页的条数 1
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pgload()
    },
    // 设置 查询 页码 1
    handleCurrentChange(currentPage) {
      // currentPage 从 第一页 开始 页面往后翻，
      this.currentPage = currentPage
      this.pgload()
    },
  }

}
</script>
